<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add To Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-title" content="Add to Home">

<link rel="shortcut icon" sizes="16x16" href="../../imgs/icon-16x16.png">
<link rel="shortcut icon" sizes="196x196" href="../../imgs/icon-196x196.png">
<link rel="apple-touch-icon-precomposed" href="../../imgs/icon-152x152.png">

<link rel="stylesheet" type="text/css" href="../../style/addtohomescreen.css">
<script src="../../src/addtohomescreen.js"></script>

<!--

 The following code adds Stock Android Browser (OS version <=4.3)
 compatibility to Add to Homescreen. The code is a sort of plugin to the
 original Add to homescreen widget and doesn't interfere with it. You can
 safely update the official Add to homescreen and this code should keep
 working.

 This addon has been kindly sponsored by Rapid Data GmbH (www.rapid-data.de)
 and released under the MIT license for everyone to use.

 USAGE: Include the 'style' and 'script' below anywhere in your page.

//-->

<!-- ************************* START HERE ************************* -->
<style type="text/css">
.ath-samsungAndroid {
	bottom: 1.8em;
	left: 50%;
	margin-left: -9em;
}

.ath-stockAndroid {
	right: 1.5em;
	top: 1.8em;
}

.ath-samsungAndroid:after {
	content: '';
	background: #eee;
	background: -webkit-linear-gradient(135deg, rgba(238,238,238,0) 0%,rgba(238,238,238,0) 50%,rgba(238,238,238,1) 50%,rgba(238,238,238,1) 100%);
	position: absolute;
	width: 2em;
	height: 2em;
	bottom: -1.5em;
	left: 0;
}

.ath-stockAndroid:after {
	content: '';
	background: #eee;
	background: -webkit-linear-gradient(-45deg, rgba(238,238,238,0) 0%,rgba(238,238,238,0) 50%,rgba(238,238,238,1) 50%,rgba(238,238,238,1) 100%);
	position: absolute;
	width: 2em;
	height: 2em;
	top: -1.5em;
	right: 0;
}

.ath-container.ath-stockAndroid:before {
	float: left;
	margin: -0.7em 0.5em 0 -0.6em;
}

.ath-container.ath-stockAndroid.ath-icon:before {
	position: absolute;
	right: auto;
	left: 0;
	margin: 0;
	float: none;
}

/*
 * The following is not strictly needed and should be customized. If you want you can have an icon inside the message.
 * All you need to to is to add a special %icon tag in the message string (see below)
 */
.ath-stockAndroid .ath-action-icon,
.ath-samsungAndroid .ath-action-icon {
	width: 1.2em;
	height: 1.2em;
	/* DO NOT include the code below, it's just for the sake of this demo and to demostrate how the %icon tag works */
	background-image:url();
	background-size: auto 100%;
}
</style>
<script>
var _ath = addToHomescreen;

// This is the special custom message for stock android, it has to be customized to your needs
var athMessages = {
	samsungAndroid: 'Custom message for Samsung Android. Click the menu hardware button and blah blah blah. This is an icon if needed: %icon',
	stockAndroid: 'Custom message for stock Android. Click the menu hardware button and blah blah blah. This is an icon if needed: %icon'
};

// Add stock browser compatibility
var _ua = window.navigator.userAgent;

_ath.isAndroidBrowser = _ua.indexOf('Android') > -1 && !(/Chrome\/[.0-9]*/).test(_ua);
_ath.isCompatible = _ath.isCompatible || _ath.isAndroidBrowser;
if ( _ath.OS == 'unsupported' && _ath.isAndroidBrowser ) {
	// additionally we check for some Samsung devices (not strictly needed)
	_ath.OS = (/ (GT-I9|GT-P7|SM-T2|GT-P5|GT-P3|SCH-I8)/).test(_ua) ? 'samsungAndroid' : 'stockAndroid';
}

_ath({
	message: _ath.OS in athMessages ? athMessages[_ath.OS] : '',

	// the followings are just for debug, customize the options to your needs
	skipFirstVisit: false,
	displayPace: false
});
</script>
<!-- ************************* END HERE ************************* -->

</head>

<body>
</body>
</html>